<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<%@ include file="/common/common.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Breaking Fast</title>
		<script type="text/javascript"> 
		    function refresh() {
		        $("#randomCodeImg").attr("src", "${base}/securityCode/loadSecurityCode?" + Math.random());
		    }
		    
			$(function() {
				$(".flip").click(function(){
				    $(".panel").slideToggle("slow");
				});
				
				$("#loginForm1").submit(function(){
					var email = $("#email").val();
					var password = $("#password").val();
					if(null == email || "" == email) {
						jAlert("<spring:message code='loginempty' />");
						return false;
					} else if(null == password || "" == password) {
						jAlert("<spring:message code='loginempty' />");
						return false;
					} else {
						return true;
					}
				});
				
				//验证信息
				$.formValidator.initConfig({
					formID: "loginForm",
					debug:false,
					onError: function(msg, obj, errorlist){
						jAlert(msg);
					}
				});
				
				$("#email").formValidator({onShow:"请输入email", onCorrect:"恭喜你,你输对了"}).regexValidator({regExp: "email", dataType:"enum", onError:"你输入的邮箱格式不正确"})
			    .ajaxValidator({
					dataType : "json",
					async : true,
					url : "${base}/frontUserCtl/checkEmailName",
					success : function(data){
						if(data == "0" ) {
			            	return true;
		            	} else {
							return "该email已被使用，请更换";
						}
					},
					buttons: $("#submitBtn"),
					error: function(jqXHR, textStatus, errorThrown) {
						alert("服务器没有返回数据，可能服务器忙，请重试" + errorThrown);
					},
					onError : "该用户名已被使用，请更换用户名",
					onWait : "正在对email进行合法性校验，请稍候..."
				});
				$("#password").formValidator({onShow:"请输入密码",onFocus:"至少6个长度",onCorrect:"密码合法"}).inputValidator({min:6, max:25, empty:{leftEmpty:false,rightEmpty:false,emptyError:"密码两边不能有空符号"},onError:"密码为6-25个字符,请确认"}).regexValidator({regExp: "Illegal", dataType:"enum", onError:"密码中包含非法字符"});
				$("#repassword").formValidator({onShow:"输再次输入密码",onFocus:"至少6个长度",onCorrect:"密码一致"}).inputValidator({min:6, max:25, empty:{leftEmpty:false,rightEmpty:false,emptyError:"重复密码两边不能有空符号"},onError:"重复密码为6-25个字符,请确认"}).compareValidator({desID:"password",operateor:"=",onError:"两次密码不一致,请确认"});
				$("#username").formValidator({onShow:"请输入真实姓名", onCorrect:"恭喜你,你输对了"}).inputValidator({min:2, max:25, onError:"真实姓名为2-25个字符"}).regexValidator({regExp: "Illegal", dataType:"enum", onError:"真实姓名中包含非法字符"});
				$("#sex").formValidator({onShow:"请选择用户性别", onCorrect:"恭喜你,你输对了"}).inputValidator({min:1, onError:"请选择性别"});
				$("#randomCode").formValidator({onShow:"请输入验证码", onCorrect:"恭喜你,你输对了"}).inputValidator({min:4, max:4, onError:"验证码输入错误"})
				.ajaxValidator({
					dataType : "json",
					async : true,
					url : "${base}/frontUserCtl/checkRandomCode",
					success : function(data){
						if(data == "1" ) {
			            	return true;
		            	} else {
							return "验证码输入错误";
						}
					},
					buttons: $("#submitBtn"),
					error: function(jqXHR, textStatus, errorThrown) {
						alert("服务器没有返回数据，可能服务器忙，请重试" + errorThrown);
					},
					onError : "验证码输入错误错误",
					onWait : "正在校验验证码，请稍候..."
				});
			});
		</script>
	</head>
	<body>
		<div class="main">
	    	<div class="nav">
	        	<p></p>
	        	<ul class="leaf">
	       	    	<li>Real Food</li>
	                <li>Healthy</li>
	                <li>Easy to get</li>
	            </ul>
				<c:if test="${null == frontCurrentUser}">
		            <div class="login_alert">
		            	<ul>
		                	<li class="flip"><a href="#"><spring:message code="login" /></a></li>
	                    	<li><a href="${base }/frontUserCtl/toRegister"><spring:message code="register" /></a></li>
							<li class="china"><a href="${base }/i18nCtl/language?locale=zh_CN">中文</a><a href="${base }/i18nCtl/language?locale=en_US">/English</a></li>
		                </ul>
		            </div>
		            <div class="panel">
		            	<form:form id="loginForm1" method="post" action="${base}/frontUserCtl/userLogin">
			            	<ul>
			                	<li><spring:message code="username" />：</li>
			                    <li><input type="text" id="email" name="email" class="text_dl" /></li>
			                    <li><spring:message code="password" />：</li>
			                    <li><input type="password" id="password" name="password" class="text_dl" /></li>
			                    <li style="text-align: center"><input type="submit" value="<spring:message code='login' />" class="btn_dl" /></li>
			                </ul>
		                </form:form>
		            </div>
	            </c:if>
	            <c:if test="${null != frontCurrentUser}">
		            <div class="login_alert">
		            	<ul>
		                	<li class="flip"><a href="#" onclick="location.href='${base}/frontUserCtl/userLogout'"><spring:message code="logout" /></a></li>
	                    	<li><spring:message code="hello" />！${frontCurrentUser.username }</li>
							<li class="china"><a href="${base }/i18nCtl/language?locale=zh_CN">中文</a><a href="${base }/i18nCtl/language?locale=en_US">/English</a></li>
		                </ul>
		            </div>
	            </c:if>
		  	</div>
			<div class="title">
               	<jsp:useBean id="now" class="java.util.Date" />
		  		<p><span>今天<fmt:formatDate value="${now}" type="both" dateStyle="long" pattern="M月d日" />，Got your diary today?</span></p>
	  		</div>
			<div class="nav_02">
				<ul>
					<li class="color_01"><a href="${base}/index">首页</a></li>
					<li class="color_02"><a href="${base }/waresFrontCtl/menuInfo">菜单及订餐</a></li>
					<li class="color_03"><a href="#">试餐</a></li>
					<li class="color_04"><a href="#">享受折扣</a></li>
					<li class="color_05"><a href="${base}/health1">了解健康信息</a></li>
					<li class="color_06"><a href="${base}/orderinput">配送范围</a></li>
		        </ul>
		    </div>
			<form:form id="loginForm" commandName="user" method="post" action="${base}/frontUserCtl/register">
			    <div class="zhuce">
			    	<ul>
			        	<li>
			        		<span>*姓名：</span>
			        		<input type="text" id="username" name="username" class="text_zc" />
		        		</li>
			            <li>
				            <span>*E-mail：</span>
				            <input type="text" id="email" name="email" class="text_zc" />
			            </li>
			            <li>
				            <span>*密码：</span>
				            <input type="text" id="password" name="password" class="text_zc" />
			            </li>
			            <li>
			            	<span>*密码重复：</span>
			            	<input type="text" id="repassword" class="text_zc" />
			            </li>
			            <li>
			            	<span>*性别：</span>
				            <select id="sex" name="sex" class="text_zc" >
				            	<option value="" selected="selected">=请选择=</option>
				            	<option value="1" ${1 == user.sex ? "selected" : ""}>男</option>
				            	<option value="0" ${0 == user.sex ? "selected" : ""}>女</option>
				            </select>
	            		</li>
			        	<li>
			        		<span>*生日：</span>
			        		<input type="text" id="servicedate" name="birthday" style="cursor:pointer;width:220px; " class="Wdate" onfocus="WdatePicker({readOnly:true,minDate:'%y-%M-%d',dateFmt:'yyyy-MM-dd'})"/>
		        		</li>
			            <li>
				            <span>验证码：</span>
				            <input type="text" id="randomCode" name="randomCode" class="text_zc" maxlength="4" style="width: 130px" />
							<img id="randomCodeImg" style="cursor:pointer;" title="点击更换" onclick="refresh()" src="${base}/securityCode/loadSecurityCode" />
			            </li>
			            <li>
				            <input type="hidden" name="submitMark" value="${registerSubmitMark }"/>
			            	<input id="submitBtn" type="submit" value="立即注册" class="btn_zc01" />
			            </li>
			        </ul>
			    </div>
		    </form:form>
		    <div class="footer">
		    	<ul>
		        	<li><a href="#" target="_blank">关于BF</a></li>
		            <li>|</li>
		            <li><a href="#" target="_blank">FAQ</a></li>
		            <li>|</li>
		            <li><a href="#" target="_blank">联系我们</a></li>
		        </ul>
		    </div>
			<div class="footer_bg"></div>
		</div>
	</body>
</html>
